<script lang="ts" setup="context">
  import { useSysStore } from '@/state/modules/sys';
  import { nextTick, reactive } from 'vue';

  const sysStore = useSysStore();
  const props = defineProps({
    tapCallback: Function,
    title: String,
  });

  // 悬浮球区域
  const floatStyle = {
    position: 'fixed',
    left: 0,
    top: 60,
    width: '100%',
    height: 'calc(100% - 110px)',
  };

  const data = reactive({
    x: 0,
    y: 0,
    scale: 2,
    old: {
      x: 0,
      y: 0,
      scale: 2,
    },
  });

  const tap = async (e) => {
    data.x = data.old.x;
    data.y = data.old.y;
    await nextTick();
    data.x = 30;
    data.y = 30;
  };

  const tap2 = async () => {
    // 解决view层不同步的问题
    data.scale = data.old.scale;
    data.scale = data.old.scale;
    console.log(data.scale);
    await nextTick();
    data.scale = 3;
  };

  const onChange = (e) => {
    data.old.x = e.detail.x;
    data.old.y = e.detail.y;
  };

  const onScale = (e) => {
    data.old.scale = e.detail.scale;
  };
</script>
<template>
  <view>
    <movable-area :style="floatStyle">
      <movable-view direction="all" out-of-bounds>
        <view class="content" @tap="props.tapCallback">{{ title || '工具栏' }}</view>
      </movable-view>
    </movable-area>
  </view>
  <!-- <view class="page-body">
    <page-head title="movable-view,可拖动视图"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title uni-common-mt">
        示例 1
        <text>\nmovable-view 区域小于 movable-area</text>
      </view>
      <movable-area>
        <movable-view :x="data.x" :y="data.y" direction="all" @change="onChange">text</movable-view>
      </movable-area>
      <view @tap="tap" class="uni-link uni-center uni-common-mt">
        点击这里移动至 (30px, 30px)
      </view>
      <view class="uni-title uni-common-mt">
        示例 2
        <text>\nmovable-view区域大于movable-area</text>
      </view>
      <movable-area>
        <movable-view class="max" direction="all">text</movable-view>
      </movable-area>
      <view class="uni-title uni-common-mt">
        示例 3
        <text>\n只可以横向移动</text>
      </view>
      <movable-area>
        <movable-view direction="horizontal">text</movable-view>
      </movable-area>
      <view class="uni-title uni-common-mt">
        示例 4
        <text>\n只可以纵向移动</text>
      </view>
      <movable-area>
        <movable-view direction="vertical">text</movable-view>
      </movable-area>
      <view class="uni-title uni-common-mt">
        示例 5
        <text>\n可超出边界</text>
      </view>
      <movable-area>
        <movable-view direction="all" out-of-bounds>text</movable-view>
      </movable-area>
      <view class="uni-title uni-common-mt">
        示例 6
        <text>\n带有惯性</text>
      </view>
      <movable-area>
        <movable-view direction="all" inertia>text</movable-view>
      </movable-area>
      <view class="uni-title uni-common-mt">
        示例 7
        <text>\n可放缩</text>
      </view>
      <movable-area scale-area>
        <movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" :scale-value="data.scale">text
        </movable-view>
      </movable-area>
      <view @tap="tap2" class="uni-link uni-center uni-common-mt" style="padding-bottom:80rpx;">
        点击这里放大3倍
      </view>
    </view>
  </view> -->
</template>

<style>
  movable-view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120rpx;
    width: 120rpx;
    border-radius: 50%;
    background: linear-gradient(45deg, #00a1ff, transparent);
    color: #fff;
    pointer-events: auto;
  }

  movable-area {
    position: fixed;
    z-index: 999;
    background-color: transparent;
    overflow: hidden;
    pointer-events: none;
  }

  .max {
    width: 500rpx;
    height: 500rpx;
  }

  .content {
    font-size: 12px;
    text-align: center;
  }
</style>
